<template>
  <div class="servegroup">
    <ConTitle :info="info"></ConTitle>
    <el-form ref="form" :model="query" :inline="true" label-width="100px">
      <el-form-item label="群组名称:">
        <el-input v-model.trim="query.keyword" class="input-width"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
          icon="el-icon-search"
          size="small"
          >搜索</el-button
        >
        <span class="search-end">搜索结果：{{ total }}</span>
      </el-form-item>
      <el-button type="primary" @click="addFun" size="small" class="addbtn"
        >新增群组 <span class="el-icon-plus"></span
      ></el-button>
    </el-form>

    <el-table :data="servegroupList" stripe style="width: 100%">
      <el-table-column prop="groupName" label="群组名称" width="180">
      </el-table-column>
      <el-table-column prop="groupNums" label="传感器节点数量">
      </el-table-column>
      <el-table-column prop="onlineNums" label="在线设备数量">
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editFun(scope.row)"
            >重命名</el-button
          >
          <el-button type="text" size="small" @click="delFun(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="servegroup-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="editId == '' ? '添加群组信息' : '修改群组信息'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="群组名称" prop="groupName">
          <el-input
            v-model="ruleForm.groupName"
            placeholder="请输入群组名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ConTitle from "@/components/ConTitle.vue";
import { $servegroupList, $groupAdd, $groupEdit, $groupDel } from "@/api";
export default {
  name: "ServeGroupView",
  data() {
    return {
      info: {
        path: "设备/",
        text: "节点群组",
        msg: "以分组的形式管理节点设备，提供了搜索、添加新的群组、重命名、移动设备等功能。",
      },
      servegroupList: [],
      total: 0, //总数量的默认值
      query: {
        currPage: 1, //当前页码
        pageSize: 5, //每页显示的条目
        keyword: "",
        editId: "",
      },
      dialogVisible: false,
      ruleForm: {
        groupName: "",
      },
      rules: {
        groupName: [
          { required: true, message: "请输入群组名称", trigger: "blur" },
        ],
      },
      editId: "",
    };
  },
  components: {
    ConTitle,
  },
  mounted() {
    // 调用第一页数据
    this.getListData(this.query);
  },
  methods: {
    async getListData() {
      var res = await $servegroupList(this.query);
      console.log(res);
      this.servegroupList = res.data.data;
      this.total = res.data.total;
    },
    handleSizeChange(num) {
      console.log(num);
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getListData();
    },
    handleCurrentChange(curr) {
      console.log(curr);
      this.query.currPage = curr;
      this.getListData();
    },
    onSubmit() {
      console.log("表单提交了");
      this.getListData();
    },
    //清除条件
    deleteSearch() {
      this.query = {
        currPage: 1, //当前页码
        pageSize: 5, //每页显示的条目
        keyword: "",
      };
    },
    //页面刷新
    onRefresh() {
      //
      this.$router.go(0);
    },
    //点击tab绑定的函数
    handleClick() {
      this.getListData();
    },
    // 新增数据
    addFun() {
      console.log("新增函数触发了");
      this.dialogVisible = true;
      this.editId = "";
    },
    async submitFun() {
      //   调用后台接口，传参，给后台添加一条记录
      console.log(this.ruleForm.groupName);
      if (this.editId == "") {
        var res = await $groupAdd({ groupName: this.ruleForm.groupName });
        console.log(res);
        if (res.data.msg == "success") {
          this.$message({
            message: "恭喜你，成功添加了一条记录",
            type: "success",
            duration: 500,
          });
        }
      } else {
        var res1 = await $groupEdit({
          id: this.editId,
          groupName: this.ruleForm.groupName,
        });
        console.log(res1);
        if (res1.data.msg == "success") {
          this.$message({
            message: "恭喜你，成功修改了一条记录",
            type: "success",
            duration: 500,
          });
        }
      }
      this.getListData();
      // 弹窗隐藏
      this.dialogVisible = false;
    },
    editFun(row) {
      console.log(row.id, row.groupName);
      this.editId = row.id;
      //显示弹窗
      this.dialogVisible = true;
      this.ruleForm.groupName = row.groupName;
    },
    delFun(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $groupDel({ id: row.id }).then((res) => {
            if (res.data.msg == "success") {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.query.currPage = 1;
              this.getListData();
            }
          });
        })
        .then(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.gateway {
  padding: 10px;
}
.search-end {
  font-size: 12px;
  margin-left: 40px;
  color: #858793;
}
.el-input {
  width: 220px;
}
.el-form {
  display: flex;
  margin-top: 20px;
}
.addbtn {
  width: 100px;
  height: 35px;
}
</style>